﻿@using ExcellOnServices.Models;

@model Order
@{
	ViewBag.Title = "Create Order";
	List<Product> products = ViewBag.Products;
	List<Service> services = ViewBag.Services;
	ICollection<OrderItem> orderItems = ViewBag.OrderItems;
}

<div class="panel panel-primary">
	<div class="panel-heading">Register New Order</div>

	@using (Html.BeginForm("Create", "Orders")) {
		<div class="panel-body">
			@Html.AntiForgeryToken()
			<div class="form-horizontal">
				<div class="form-group">
					<label class="control-label col-md-2">Begin Date</label>
					<div class="col-md-4">
						@Html.TextBoxFor(model => model.BeginDateTime, new { @class = "form-control b-datetimepicker", @readonly = "readonly" })
						@Html.ValidationMessageFor(model => model.BeginDateTime)
					</div>
				</div>

				<div class="form-group">
					<label class="control-label col-md-2">End Date</label>
					<div class="col-md-4">
						@Html.TextBoxFor(model => model.EndDateTime, new { @class = "form-control b-datetimepicker", @readonly = "readonly" })
						@Html.ValidationMessageFor(model => model.EndDateTime)
					</div>
				</div>

				<div class="form-group">
					<label class="control-label col-md-2" style="padding: 4px 0px 0px 15px">Payment</label>
					<div class="col-md-4">
						@foreach (var item in Enum.GetValues(typeof(ExcellOnServices.Models.Order.PaymentType))) {
							@Html.RadioButtonFor(m => m.Payment, (int)item, new { Checked = "checked" })
							@Html.Raw("&nbsp;")
							@Html.Label(item.ToString())
							@Html.Raw("&nbsp;&nbsp;&nbsp;")
						}
						@Html.ValidationMessageFor(model => model.Payment)
					</div>
				</div>
				@Html.ValidationSummary(true)
			</div>
		</div>
		
		<table class="table table-striped table-hover" id="table-orderitems">
			<tr>
				<th class="text-center" width="1px">Image</th>
				<th>Name</th>
				<th class="text-center" width="30%">Service</th>
				<th class="text-center" width="15%">Price</th>
			</tr>

			@foreach (var product in products) {
				<tr id="row-orderitem-@product.Id" class="row-orderitem">
					<td>
						<img src="@product.ImageUrl" style="width:50px;" />
					</td>
					<td>
						@Html.DisplayFor(modelItem => product.Name)
						<br />
						<a href="#" onclick="removeProduct(@product.Id); return false;">Remove</a>
					</td>
					<td>
						@Html.DropDownList("orderItems[" + @product.Id + "].Service_Id", (IEnumerable<SelectListItem>)ViewBag.SelectServices, null, new { @class = "form-control select-service input-orderitem-" + @product.Id, @disabled = "disabled", @id = "select-service-" + @product.Id, @productId = @product.Id })
					</td>
					<td>
						<span id="orderitem-price-@product.Id">@Html.DisplayFor(modelItem => product.Price)</span>

						<input type="hidden" name="orderItems.Index" value="@product.Id" class="input-orderitem-@product.Id" disabled="disabled" />
						<input type="hidden" name="orderItems[@product.Id].Product_Id" value="@product.Id" class="input-orderitem-@product.Id" disabled="disabled" />
					</td>
				</tr>
			}
		</table>
            
		<div class="panel-footer">
			<input type="submit" value="Create" class="btn btn-primary" />
			@Html.ActionLink("Back to List", "Index", null, new { @class = "btn btn-link btn-sm" })
		</div>
	}
</div>

<div class="panel panel-info">
	<div class="panel-heading">Product List</div>
	<div class="panel-body">
		<form class="form-inline" role="form">
			<div class="form-group">
				@Html.DropDownList("input-categoryId", (IEnumerable<SelectListItem>)ViewBag.SelectCategories, "--Select Category--", new { @class = "form-control", @onchange="searchProduct(); return false;"})
			</div>
			<div class="pull-right">
				<div class="form-group">
					<input type="text" id="input-search" name="search" class="form-control">
				</div>

				<button id="button-search" class="btn btn-primary" onclick="searchProduct(); return false;">Search</button>
				<button id="button-clear" class="btn btn-default" onclick="clearSearchProduct(); return false;">Clear</button>
			</div>
		</form>
	</div>

	<div id="ajax-products">
		@if (products == null || !products.Any()) {
			<div class="alert alert-info">
				No products available.
			</div>
		} else {
			<table class="table table-striped table-hover" id="table-products">
				<tr>
					<th class="text-center">Image</th>
					<th>Category</th>
					<th>Name</th>
					<th class="text-center">Price</th>
					<th class="text-center">Discount</th>
					<th class="text-center">Action</th>
				</tr>

				@foreach (var product in products) {
					<tr id="row-product-@product.Id" class="row-product" productId="@product.Id">
						<td>
							<img src="@product.ImageUrl" style="width:50px;" />
						</td>
						<td>
							@Html.DisplayFor(modelItem => product.Category.Name)
						</td>
						<td>
							@Html.DisplayFor(modelItem => product.Name)
						</td>
						<td>
							@Html.DisplayFor(modelItem => product.Price)
						</td>
						<td>
							@Html.DisplayFor(modelItem => product.Discount)
						</td>
						<td>
							<button class="select-product btn btn-primary" onclick="addProduct(@product.Id)">Select</button>
						</td>
					</tr>
				}
			</table>
		}
	</div>

</div>
@section Scripts {
	@Scripts.Render("~/bundles/jqueryval")
	<script type="text/javascript">
		$(function () {
			$(".b-datetimepicker").datepicker({ dateFormat: "dd/MM/yy" });
		});

		function addProduct(productId) {
			$("#row-product-" + productId).hide();
			$("#row-orderitem-" + productId).show();
			$(".input-orderitem-" + productId).each(function () {
				$(this).removeAttr('disabled');
			});

			var serviceId = $("#select-service-" + productId).val();
			$("#orderitem-price-" + productId).html(servicePrices[serviceId]);
		}

		function removeProduct(productId) {
			$("#row-product-" + productId).show();
			$("#row-orderitem-" + productId).hide();
			$(".input-orderitem-" + productId).each(function () {
				$(this).attr('disabled', 'disabled');
			});
		}

		function searchProduct() {
			var search = $("#input-search").val();
			var categoryId = $("#input-categoryId").val();
			var url = '@Url.Action("GetAjaxProducts", "Orders")';
			$("#ajax-products").fadeOut(100);

			$.ajax({
				url: url + '?search=' + search + '&categoryId=' + categoryId,
				success: function (result) {
					$("#ajax-products").html(result);

					$(".row-product").each(function () {
						var productId = $(this).attr("productId");

						var isDisabled = $("#select-service-" + productId).attr("disabled");
						if (isDisabled == null || isDisabled == false) {
							$("#row-product-" + productId).hide();
						}						
					});
					$("#ajax-products").fadeIn(400);
				},
				error: function (jqXHR, textStatus, errorThrown) {
					alert("An error has occured: " + errorThrown);
				}
			});

			return false;
		}

		function clearSearchProduct() {
			$("#input-search").val("");

			searchProduct();
		}

		var servicePrices = new Array();

		$(document).ready(function () {
			$("#input-search").val("");

			@if (services != null) {
				foreach (Service service in services) {
					 <text>
			var price = parseFloat('@(service.Price)');
			var index = '@(service.Id)';
			servicePrices[index] = "$" + price.toFixed(2);
					</text>
				}
			}

			$(".row-orderitem").each(function () {
				$(this).hide();
			});

			@if (orderItems != null) {
				foreach (OrderItem item in orderItems) {
					<text>
			$("#row-orderitem-@item.Product_Id").each(function () {
				$(this).show();
			});
			$(".input-orderitem-@item.Product_Id").each(function () {
				$(this).removeAttr('disabled');
			});
			var serviceId = $("#select-service-@item.Product_Id").val();
			$("#orderitem-price-" + productId).html(servicePrices[serviceId]);
					</text>
				}
			}

			$(".select-service").each(function () {
				$(this).change(function () {
					var serviceId = $(this).val();
					var productId = $(this).attr('productId');
					$("#orderitem-price-" + productId).html(servicePrices[serviceId]);
				})
			})
		})
	</script>
}
